import { defineStore } from "pinia";
import { Ref, ref, reactive } from "vue";
import { fetchCategory1API, fetchCategory2API, fetchCategory3API } from "@/api/product/attributeApi/attribute.ts";
import { category } from "@/api/product/attributeApi/interface.ts";
import { tabNavStore } from "@/pinia/modules/product/attributeStore/tabNavStore/interface.ts";
import { categoryParams } from "@/views/product/attribute/interface/interface.ts";

const useTabNavStore = defineStore("tabNavStore", (): tabNavStore => {
  /* 一级分类列表 */
  const category1List: Ref<category[]> = ref<category[]>([]);
  /* 二级分类列表 */
  const category2List: Ref<category[]> = ref<category[]>([]);
  /* 三级分类列表 */
  const category3List: Ref<category[]> = ref<category[]>([]);
  /* 一级、二级、三级分类的ID */
  const categoryId: categoryParams = reactive<categoryParams>({ category1Id: "", category2Id: "", category3Id: "" });

  /* 发送请求获取一级分类列表的回调函数 */
  const fetchCategory1List: () => Promise<void> = async (): Promise<void> => {
    const { data }: { data: category[] } = await fetchCategory1API();
    category1List.value = data;
  };
  /* 发送请求获取二级分类列表的回调函数 */
  const fetchCategory2List: () => Promise<void> = async (): Promise<void> => {
    const { data }: { data: category[] } = await fetchCategory2API(categoryId.category1Id as number);
    category2List.value = data;
  };
  /* 发送请求获取三级分类列表的回调函数 */
  const fetchCategory3List: () => Promise<void> = async (): Promise<void> => {
    const { data }: { data: category[] } = await fetchCategory3API(categoryId.category2Id as number);
    category3List.value = data;
  };
  return {
    category1List,
    category2List,
    category3List,
    categoryId,
    fetchCategory1List,
    fetchCategory2List,
    fetchCategory3List,
  };
});

export default useTabNavStore;
